<template>
  <div style="width: 100vw; height: 100vh; margin: 0 auto; overflow: hidden">
    <!-- {{route.query.page}} -->
    <svg-prview
      v-if="prview_data.length"
      :component_infos="component_infos"
      :svg_data="prview_data"
      :svgCanvas="{ width: 1710, height: 860 }"
      :jsonName="route.query.page"
    ></svg-prview>
  </div>
</template>

<script setup lang="ts">
import SvgPrview from "../components/SvgPrview.vue";
import axios from "axios";
import App from "..App.vue";
import { createApp } from "vue";
import { ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();

const interval = ref<any>(null);

const component_infos = ref([]);
//要预览的数据
const prview_data = ref<any>([]);

//获取组件列表
axios.get("json/InterfaceReturn.json").then((res) => {
  component_infos.value = res.data;
});

axios.get("json/" + route.query.page + ".json").then((res) => {
  prview_data.value = res.data;
});
</script>
